<template>
    <div class="comment">
        <h2 class="title">发表评论</h2>
        
        <div class="form">
            <textarea name="" id="" cols="30" rows="10" v-model="value" placeholder="留下你的小耳语..."></textarea>
            <mt-button size="large" type="primary" @click.stop="submitHandle">提交</mt-button>
        </div>

        <div class="comment-list">
            <div class="comment-item" v-for="item in comment" :key="item.sn">
                <div class="cmt-header mui-clearfix">
                    <i class="mui-icon mui-icon-contact"></i> {{item.name}}
                    <span class="mui-pull-right">{{item.time | dataFormat}}</span>
                </div>
                <div class="cmt-body">
                    {{item.content}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
    data(){
        return {
            comment: [],
            pageSize: 1,
            value: ''
        }
    },
    props: {
        id: String
    },
    created() {
        this.getComment();
    },
    methods: {
        getComment() {
            this.$http.get('comment.json').then((result) => {
                this.comment = this.comment.concat(result.body);
            },
            () => {
                Toast("请求数据失败！");
            });
        },
        submitHandle() {
            if (this.value.trim()){
                this.comment.unshift({
                    "sn": new Date().getTime(),
                    "name": "匿名用户",
                    "time": new Date(),
                    "content": this.value
                })
            } else {
                Toast("评论数据不能为空！");
            }
        }
    }
}
</script>

<style scoped>
.comment .title{
    font-size: .15rem;
    padding: .16rem .16rem .06rem;
    background: #fff;
    margin: 0;
    color: #333;
    font-weight: 100;
}
.comment .form{
    padding: .16rem;
    background: #fff;
    border-top: 1px solid #e5e5e5;
}
.comment .form textarea{
    height: .68rem;
    padding:.04rem .08rem;
    line-height: .26rem;
    font-size: .14rem;
}
.comment button{
    font-size: .17rem;
    margin-bottom:.1rem;
}
.comment-list{
    padding: 0 .16rem;
    font-size: .14rem;
}
.cmt-header{
    color: #666;
    font-size:12px;
}
.cmt-header i{
    font-size: .18rem;
    color: #999;
}
.cmt-body{
    padding: .04rem .22rem .1rem;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: .1rem;
}
.comment-list .comment-item:last-child .cmt-body{
    border:none;
}
</style>
